<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增Tab' : '编辑Tab'" width="500px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
      <el-form-item label="tab名称" prop="name">
        <el-input v-model="form.name" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="缩写" prop="short">
        <el-input v-model="form.short" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="背景图">
        <el-upload
          class="avatar-uploader"
          action="http://wwx.api.local/admin/v1/upload/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.bg_img" :src="form.bg_img" class="avatar" style="weight:200Px;height:100px">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number v-model="form.font_size" :min="1" :max="300" >

        </el-input-number>
      </el-form-item>
      <el-form-item label="字体颜色" >
        <el-color-picker v-model="form.font_color"></el-color-picker>
      </el-form-item>
      <el-form-item label="是否加粗" >
        <el-switch
          v-model="form.is_font_weight"
          active-text="加粗"
          inactive-text="不加"
          active-value="1"
          inactive-value="0">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Form',
  components: { Treeselect },
  props: {
    roles: {
      type: Array,
      required: true
    },
    isAdd: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      form: { id: '', name: '', short: '', bg_img: '', font_size: 16, font_color:'#333', is_font_weight: '0' },
      rules: {
        name: [
          { required: true, message: '请输入tab名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        short: [
          { required: true, message: '请输入tab英文缩写', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          const _this = this
          if (this.isAdd) {
            this.doAdd()
          } else this.doEdit()
        } else {
          return false
        }
      })
    },
    doAdd() {
      this.$api.permission.tabConfig.add({
        data: this.form
      }).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          message: 'tab添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      this.$api.permission.tabConfig.edit({
        data: this.form
      }).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.sup_this.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.roleIds = []
      this.form = { id: '', name: '', short: '', bg_img: '', font_size: 16, font_color:'#333', is_font_weight: '0' }
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
        this.form.bg_img = res.data.url;
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
         this.$notify({
          title: '上传头像图片大小不能超过 2MB!',
          type: 'error',
          duration: 2500
        })
      }
      return isLt2M;
    }

      
  }
}
</script>

<style scoped>

</style>
